<script setup lang="ts">
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue';
import {updateConfig, getConfigListByCategory, ConfigVO} from "@/api/infra/config";
import {restartClient} from '@/api/yz/mqtt'
const configData = ref({
  broker: '',
  uploadTopic: '',
  downloadTopic: '',
  lastWillTopic: '',
  username: '',
  password: '',
  clientId: '',
  qos: ''
})
const configList = ref([{
  name: '服务器地址',
  value: '',
  key: 'broker'
}, {
  name: '接收消息主题',
  value: '',
  key: 'uploadTopic'
}, {
  name: '发出消息主题',
  value: '',
  key: 'downloadTopic'
}, {
  name: '最后遗嘱接收主题',
  value: '',
  key: 'lastWillTopic'
}, {
  name: '用户名',
  value: '',
  key: 'username'
}, {
  name: '密码',
  value: '',
  key: 'password'
}, {
  name: 'QOS',
  value: 0,
  key: 'qos'
}])
onMounted(()=>{
  loadConfigCategory();
})
// 加载配置
const loadConfigCategory = async () => {
  const res = await getConfigListByCategory('mqtt')
  configList.value = res
  // 一一对应本地的内容
  console.log(res)
}
// 保存配置
const saveConfigCategory = () => {
  // 一一保存
  configList.value.forEach(item =>{
    updateConfig(item as ConfigVO)
  })
}
const restart = async () => {
 const res = await restartClient()
  console.log(res)
}
</script>

<template>
  <ContentWrap>
    <el-button @click="restart">重载配置启动</el-button>
  </ContentWrap>
  <ContentWrap>
    服务启动状态：
    <el-tag type="success">运行中</el-tag>
  </ContentWrap>
  <ContentWrap>

    <el-button @click="saveConfigCategory">
      更新参数
    </el-button>
    <el-form
      ref="formRef"
      label-width="100px"
      class="w-400px"
    >
      <template v-for="item in configList" :key="item.id">
        <el-form-item :label="item.name">
          <el-input v-model="item.value"/>
        </el-form-item>
      </template>


    </el-form>

  </ContentWrap>
</template>

<style scoped lang="scss">

</style>
